<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实例挂载的简单案例</title>
    <script src="../application/vue.js"></script>
    <style>
        .tip-box {
            width: 200px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.6);
            text-align: center;
            /* line-height: 60px; */
            border-radius: 5px;
            color: white;
            font-size: 18px;
            position: fixed;
            left: 50%;
            top: 0px;
            /* transform: translate(-50%, 0%); */
            animation-name:tipBox;
            animation-duration:3s;
            /* animation-iteration-count:infinite; */
        }
        @keyframes tipBox{
            0%{
                transform:translate(-50%,-100%);
                opacity:0
            }
            25%{
                transform:translate(-50%,50%);
                opacity:1
            }
            75%{
                transform:translate(-50%,50%);
                opacity:1
            }
            100%{
                transform:translate(-50%,-100%);
                opacity:0
            }
        }
    </style>
</head>

<body>
    <input type="button" value="打开消息提示" onclick="openTipBox()">
    <!-- vue实例模板定义 -->
    <template id="tip"> 
        <div class="tip-box">
            <p>{{msg}}</p>
        </div>
    </template>
</body>
<script>
    function openTipBox() {//触发方法后构建一个vue实例
        var tip = new Vue({
            template: "#tip",//以自定义模板作为与页面关联的DOM元素,此时等同于替代了el；在进行render渲染前实现了所谓虚拟DOM的生成
            data: {
                msg: "佛怒火莲"
            }
        });
        console.log(tip.$el);
        tip.$mount();//空挂载
        console.log(tip.$el);
        document.body.appendChild(tip.$el);//将vue实例模板与页面关联并添加到页面中显示
        setTimeout(()=>{
            document.body.removeChild(tip.$el);//销毁页面容器
            tip.$destroy();//vue实例销毁,只销毁vue实例对象，不销毁页面容器
        },3000);
    }
</script>

</html>